<template>
  <div>
    <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm">
      <template #operationAfterExtend="{record}">
        <a-button type="primary" size="mini" shape="round" @click="handleDetail(record)">详情</a-button>
      </template>
    </sa-table>
    <!-- 编辑表单 -->
    <detail-form ref="detailRef" @success="refresh" />
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, computed } from 'vue'
import mallApi from '@/api/system/mall'
import SaTable from '@cps/sa-table/index.vue'
import { Message } from '@arco-design/web-vue'
import { throttle } from 'lodash';
import detailForm from './detail.vue'
const crudRef = ref()
const detailRef = ref()
const searchForm = ref({

})
const options = reactive({
  api: mallApi.fuxiao_list,//表格数据接口
  operationColumnWidth: 120,//操作欄
  showSearch: false,
  columnAlign: 'center',
  pageSimple: false,//是否展示操作欄有 以及工具欄
  isTreeTable: false,
  isExpand: false,//展開所有子樹
})
const columns = reactive([
  { title: 'ID', dataIndex: 'id', width: 100 },
  { title: 'SKU', dataIndex: 'sku', width: 150 },
  { title: 'SKU名称', dataIndex: 'name', width: 150 },
  { title: 'SKU总销量', dataIndex: 'sales', width: 120 },
  { title: '总销量金额', dataIndex: 'sales_price', width: 120 },
  { title: '英文名称', dataIndex: 'name_en', width: 150 },
  { title: '创建时间', dataIndex: 'create_time', width: 180 },
])

const initPage = async () => {

}
const refresh = async () => {
  crudRef.value?.refresh()
}
const handleDetail=(data)=>{
  detailRef.value?.open(data)
}
onMounted(async () => {
  initPage()
  refresh()
})
</script>

<style scoped>
.icon {
  width: 1em;
}
</style>